<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text" id="m">
<input type="text" id="n">

<!--<input type="button" value="加" onclick="add()">-->
<!--<input type="button" value="减" onclick="reduce()">-->
<!--<input type="button" value="乘" onclick="sum()">-->
<!--<input type="button" value="除" onclick="ave()">-->

<input type="button" value="加" onclick="f(1)">
<input type="button" value="减" onclick="f(2)">
<input type="button" value="乘" onclick="f(3)">
<input type="button" value="除" onclick="f(4)">
<div>结果</div>

<script>
 // 如果给元素添加了id,那么会自动添加以下两行代码,这两行可以不写
       // let m=document.querySelector("#d1");
       // let n=document.querySelector("#d2");
      let num=document.querySelector("div");

      function f(number) {
          if(isNaN(m.value) || isNaN(n.value)) {
              num.innerText="输入数值错误";
          }else {
              switch (number) {
                case 1:  num.innerText = m.value * 1 + n.value * 1;
                    break;
                case 2:  num.innerText = m.value * 1 - n.value * 1;
                    break;
                case 3:  num.innerText = m.value * 1 * n.value * 1;
                    break;
                case 4: if(n.value==0){
                             num.innerText ="被除数不能为0";
                        }else{
                             num.innerText = m.value * 1 / n.value * 1;
                            break;
                        }
              }
          }
      }

</script>

<!--<script>-->
<!--    let m=document.querySelector("#d1");-->
<!--    let n=document.querySelector("#d2");-->
<!--    let num=document.querySelector("div");-->
<!--    function add() {-->
<!--        if(isNaN(m.value) || isNaN(n.value)){-->
<!--            num.innerText="输入错误";-->
<!--        }else{-->
<!--            num.innerText=m.value*1+n.value*1;-->
<!--        }-->
<!--    }-->

<!--    function reduce() {-->
<!--        if(isNaN(m.value) || isNaN(n.value)){-->
<!--            num.innerText="输入错误";-->
<!--        }else{-->
<!--            num.innerText=m.value*1-n.value*1;-->
<!--        }-->
<!--    }-->
<!--    function sum() {-->
<!--        if(isNaN(m.value) || isNaN(n.value)){-->
<!--            num.innerText="输入错误";-->
<!--        }else{-->
<!--            num.innerText=m.value*1*n.value*1;-->
<!--        }-->
<!--    }-->
<!--    function ave() {-->
<!--        if(isNaN(m.value) || isNaN(n.value) || n.value==0){-->
<!--            num.innerText="输入错误";-->
<!--        }else{-->
<!--            num.innerText=m.value*1/n.value*1;-->
<!--        }-->
<!--    }-->
<!--    -->
<!--</script>-->
</body>
</html>